<template>
  <div>
    <Breadcrumb :items="['系统管理', '客户端管理']" />
    <a-card class="general-card" title="客户端管理">
      <template #extra>
        <a-space direction="horizontal" :size="18">
          <a-button v-authorities="[AUTH_PM.CLIENT_READ]" type="primary" :loading="loading" @click="refresh">
            <template #icon>
              <icon-refresh />
            </template>
            刷新
          </a-button>
        </a-space>
      </template>
      <!--分割线-->
      <a-divider direction="horizontal" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button v-authorities="[AUTH_PM.CLIENT_WRITE]" type="primary" @click="onCreate">
              <template #icon>
                <icon-plus />
              </template>
              添加
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-table
        :columns="tableColumns"
        :data="tbData"
        :loading="loading"
        row-key="id"
        :pagination="false"/>
    </a-card>
    <client-drawer ref="clientDrawer" @refresh="refresh" />
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from "vue";
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import ClientDrawer from "@/views/system/client/components/client-drawer.vue";
import useLoading from "@/hooks/loading";
import { deleteById, findList } from "@/api/modules/system/client";
import { ExampleClient } from "@/types/modules/auth";
import { AUTH_PM } from '@/types/PM'

const tableColumns = [{
  title: '客户端ID',
  dataIndex: 'clientId',
  width: 150
}, {
  title: '秘钥',
  dataIndex: 'clientSecret',
  width: 150
}, {
  title: '域',
  dataIndex: 'scope',
  width: 50
}, {
  title: '自动放行',
  dataIndex: 'autoapprove',
  width: 100,
  render: ({ record }: { record: any }) => {
    return record.autoapprove === 'true'? '是': '否'
  }
}, {
  title: '授权模式',
  dataIndex: 'authorizedGrantTypes',
  width: 200,
  render: ({ record }: { record: any }) => {
    const grantTypes = record.authorizedGrantTypes.split(',');
    return <a-space>{
      grantTypes.map((mode: string, index: number) => {
        if (index < 2) {
          return (<a-tag>{mode}</a-tag>)
        }
        if (index === 2) {
          return <a-tag title={grantTypes.slice(2)}>...</a-tag>
        }
        return <></>
      })
    }</a-space>
  }
}, {
  title: '令牌时效',
  dataIndex: 'accessTokenValidity',
  align: 'right',
  width: 100
}, {
  title: '刷新时效',
  dataIndex: 'refreshTokenValidity',
  align: 'right',
  width: 100
}, {
  title: "操作",
  width: 220,
  align: "right",
  fixed: "right",
  render: ({ record }: { record: any }) => {
    return <>
      <a-button v-authorities={Array.of(AUTH_PM.CLIENT_READ)} type="text" size="small" onClick={() => onPreview(record.clientId)}>
        预览
      </a-button>
      <a-button v-authorities={Array.of(AUTH_PM.CLIENT_WRITE)} type="text" size="small" onClick={() => onUpdate(record.clientId)}>
        编辑
      </a-button>
      <a-popconfirm content={`确定删除 '${record.clientId}' 吗?`} type="warning" onOk={() => onDelete(record.clientId)}>
        <a-button v-authorities={Array.of(AUTH_PM.CLIENT_WRITE)} type="text" size="small" status="danger">
          删除
        </a-button>
      </a-popconfirm>
    </>
  }
}]
const clientDrawer = ref<any>(null)
const tbData = ref<ExampleClient[]>([]);
const { loading, setLoading } = useLoading();

const refresh = async () => {
  setLoading(true)
  tbData.value = (await findList()).data
  setLoading(false)
}

const onDelete = async (clientId: string) => {
  try {
    setLoading(true)
    await deleteById(clientId)
    setLoading(false)
  } finally {
    await refresh()
  }
}

const onCreate = () => {
  clientDrawer.value.createHandle()
}

const onUpdate = async (id: string) => {
  setLoading(true);
  await clientDrawer.value.updateHandle(id);
  setLoading(false);
};

const onPreview = async (id: string) => {
  setLoading(true);
  await clientDrawer.value.previewHandle(id);
  setLoading(false);
};

onMounted(() => {
  refresh()
})
</script>

<script lang="tsx">
export default {
  name: "Client"
};
</script>

<style scoped>

</style>
